<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link
          rel="shortcut icon"
          type="image/x-icon"
          href="/logo.png"
  />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>XL-LightHouse</title>
</head>
<style>
  html {
    overflow-y: hidden;
  }

  html.loaded {
    overflow-y: auto;
  }

  #loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    z-index: 9999;
  }
</style>
<body>
<div id="root"></div>
<div id="loading"></div>
<script type="module" src="/src/main.tsx"></script>
<script>
  const theme = localStorage.getItem('arco-theme') || 'light';
  if(theme === 'dark'){
    document.body.style.backgroundColor = '#232324';
  }else if(theme === 'light'){
    document.body.style.backgroundColor = '#F6F6F6';
  }
</script>
</body>
</html>
